<template>
  <div class="activity">
    <!-- 活动列表 -->
    <el-timeline class="act_list">
      <el-timeline-item
        v-for="(item, index) in actList"
        :key="index"
        :timestamp="item.createTime"
        placement="top"
      >
        <el-card class="content">
          <div class="resume">
            {{ item.resume }}
          </div>
          <div class="startTime">活动开始时间：{{ item.startTime }}</div>
          <div class="number">参与人数：{{ item.number }}</div>
          <div class="endTime">活动结束时间：{{ item.endTime }}</div>
          <el-link
            class="enter"
            :underline="false"
            type="primary"
            @click="enter(item)"
            >报名参加</el-link
          >
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <!-- <div v-for="(item, index) in actList" :key="index" class="act_list">
      <img src="@/assets/activity/u2819.svg" alt="" />
      <p>{{ item.startTime }}</p>
      <img src="@/assets/activity/u2832.svg" alt="" class="line" />
      <div class="content">
        <div class="resume">
          {{ item.resume }}
        </div>
        <div class="endTime">活动结束时间：{{ item.endTime }}</div>
        <el-link class="enter" :underline="false" type="primary"
          >报名参加</el-link
        >
      </div>
    </div> -->
  </div>
</template>
<script>
import { Message } from "element-ui";
import { getActivity, addRegistration } from "@/api/activity";
export default {
  data() {
    return {
      // 活动列表
      actList: [
        // {
        //   startTime: "2021-04-03",
        //   resume:
        //     "活动简述:为了满足广大儿童与家长的娱乐、交流、学习需求,让我们的孩子们有-块专属于自己的屏幕与天空，晚报拟将晚报内部电影厅打造成专属的儿童亲子影院，定期播放专属儿童的各类电影与演出活动,如英语专场、爸爸去看电影专场、假期电影周、动漫专场等等,让亲子家庭在娱乐中提升、在快乐中沉思。同时影院将并与商业机构合作,开展各类知识讲座与交流,如儿童保险、家庭理财、儿童教育、母婴用品交流等等，在丰富儿童的业余生活，服务亲子家庭的基本需求的同时，促进家庭和谐，让父母与子女相互尊重、共同教育、-起成长",
        //   endTime: "2021-04-03",
        // },
        // {
        //   startTime: "2021-04-03",
        //   resume:
        //     "活动简述:为了满足广大儿童与家长的娱乐、交流、学习需求,让我们的孩子们有-块专属于自己的屏幕与天空，晚报拟将晚报内部电影厅打造成专属的儿童亲子影院，定期播放专属儿童的各类电影与演出活动,如英语专场、爸爸去看电影专场、假期电影周、动漫专场等等,让亲子家庭在娱乐中提升、在快乐中沉思。同时影院将并与商业机构合作,开展各类知识讲座与交流,如儿童保险、家庭理财、儿童教育、母婴用品交流等等，在丰富儿童的业余生活，服务亲子家庭的基本需求的同时，促进家庭和谐，让父母与子女相互尊重、共同教育、-起成长",
        //   endTime: "2021-04-03",
        // },
        // {
        //   startTime: "2021-04-03",
        //   resume:
        //     "活动简述:为了满足广大儿童与家长的娱乐、交流、学习需求,让我们的孩子们有-块专属于自己的屏幕与天空，晚报拟将晚报内部电影厅打造成专属的儿童亲子影院，定期播放专属儿童的各类电影与演出活动,如英语专场、爸爸去看电影专场、假期电影周、动漫专场等等,让亲子家庭在娱乐中提升、在快乐中沉思。同时影院将并与商业机构合作,开展各类知识讲座与交流,如儿童保险、家庭理财、儿童教育、母婴用品交流等等，在丰富儿童的业余生活，服务亲子家庭的基本需求的同时，促进家庭和谐，让父母与子女相互尊重、共同教育、-起成长",
        //   endTime: "2021-04-03",
        // },
      ],
      isLogin: false,
    };
  },
  mounted() {
    this.isExistUid();
    this.activityList();
  },
  methods: {
    // 判断是否登陆
    isExistUid() {
      // console.log(localStorage.getItem("uid"))
      if (
        localStorage.getItem("uid") != null &&
        localStorage.getItem("uid") != ""
      ) {
        // alert("您还没有登录，请登录后重试");
        // this.$router.push("/home")
        this.isLogin = true;
      } else {
        this.isLogin = false;
      }
    },
    // 获得活动列表
    activityList() {
      getActivity().then((res) => {
        res.msg = "活动列表";
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].createTime = this.formatDate(res.data[i].createTime);
          res.data[i].startTime = this.formatDate(res.data[i].startTime);
          res.data[i].endTime = this.formatDate(res.data[i].endTime);
        }
        // console.log(res);
        this.actList = res.data;
      });
    },
    // 日期格式化 年月日
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return str;
    },
    // 已登录可参加，未登录不可参加
    enter(item) {
      // console.log(localStorage.getItem("uid"))
      // console.log(this.isLogin)
      if (this.isLogin == true) {
        let data = {
          uid: localStorage.getItem("uid"),
          aid: item.id,
        };
        addRegistration(data).then((res) => {
          console.log(res);
          if (res.data.success == "true") {
            Message.success("报名成功！");
            setTimeout("window.location.reload()",1000);
          } else {
            Message.warning("您已报名参加！");
          }
        });
      } else {
        alert("您还没有登录，请登录后重试");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.activity {
  // height: 1500px;
  height: 100%;
  margin-top: 80px;
  .act_list {
    width: 1000px;
    height: auto;
    font-size: 16px;
    color: gray;
    margin: 0 auto;
    margin-bottom: 50px;
    .content {
      border: 1px black solid;
      border-radius: 5px;
      margin-left: 25px;
      margin-top: 10px;
      box-shadow: 5px 5px 5px 0px lightgray;
      .resume {
        float: left;
        color: black;
        font-size: 20px;
        font-weight: bold;
        padding: 30px;
        margin-top: 10px;
      }
      .startTime {
        font-size: 18px;
        padding-left: 30px;
      }
      .number {
        font-size: 18px;
        float: right;
        padding-right: 30px;
      }
      .endTime {
        font-size: 18px;
        padding: 30px;
      }
      .enter {
        margin-left: 30px;
        margin-bottom: 50px;
      }
    }
  }
}
</style>